<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局</title>
    <style type="text/css">
        .html {
            padding: 0px;
            margin: 0px;
        }
        
        .layout {
            min-height: 100px;
        }
        
        .absolute {
            height: 200px;
        }
    </style>
</head>

<body>
    <h3>flex布局</h3>
    <section class="layout flex">
        <style>
            .flex {
                display: flex;
            }
            
            .layout.flex .left {
                width: 200px;
                background-color: red;
            }
            
            .layout.flex .center {
                flex: 1;
                background-color: royalblue;
                color: greenyellow;
                text-align: center;
            }
            
            .layout.flex .right {
                width: 200px;
                background-color: green;
            }
        </style>
        <div class="left">左边</div>
        <div class="center">flex布局的优缺点：</br>
            优点是：布局比较简单，容易上手语法简单 缺点是：兼容性较差，不支持IE8以下的浏览器
        </div>
        <div class="right">右边</div>
    </section>
    <h3>绝对定位布局</h3>
    <div class="layout absolute">
        <style type="text/css">
            .absolute {
                margin-top: 30px;
            }
            
            .layout.absolute .left {
                position: absolute;
                left: 0px;
                background-color: red;
            }
            
            .absolute.layout .center {
                position: absolute;
                /* top: 100px;
                bottom: 100px; */
                background-color: royalblue;
                left: 200px;
                right: 200px;
                color: white;
            }
            
            .layout.absolute .right {
                position: absolute;
                background-color: saddlebrown;
                right: 0px;
            }
        </style>
        <div class="left">1111</div>
        <div class="center">
            绝对定位的特点： 1、绝对定位会改变元素的性质， 内联元素变成块元素，块元素的宽度和高度默认都被内容撑开</br>
            2、绝对定位后，被定位的对象就脱离了文档流，原来的位置相当于是空的，由后面的元素占据</br>
            3、绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位   </br>
            4、开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化    </br>
            5、绝对定位会使元素提升一个层级    </br>
            6、在这个案例中，不设置top或者bottom，则不破坏上下的布局
        </div>
        <div class="right">1111</div>
    </div>
    <h3>table布局</h3>
    <section class="layout table">
        <style type="text/css">
            .table {
                display: table;
                width: 100%;
                min-height: 100px;
                margin-top: 40px;
            }
            
            .layout.table .left {
                display: table-cell;
                width: 300px;
                background: red;
            }
            
            .layout.table .center {
                display: table-cell;
            }
            
            .layout.table .right {
                display: table-cell;
                width: 300px;
                background: blue;
            }
        </style>
        <div class="left">2</br>2</br>2</br>2</br>2</br>2</br>2</br>2</br>2</div>
        <div class="center">
            table布局的优缺点：</br>
            优点是：代码少，简便 缺点是：table 比其他html标签占更多的字节。造成下载时间延迟，占用服务器更多的流量资源（代码冗余）。 2.table 会阻挡浏览其渲染引擎的渲染顺序，会延迟页面的生成速度，让用户等待时间更久。

        </div>
        <div class="right">3 </div>
    </section>
    <section class="layout grid">
        <style type="text/css">
            .grid {
                display: grid;
            }
        </style>
        <a href="http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html"></a>
    </section>


</body>

</html>